<template>
	<view>
		<view :style="'background-image: url('+get_img+'sys/icon/chickbj.png'+');'" class="image"></view>
		<view style="height: 720rpx;width: 200rpx;float: right;padding-top: 160rpx;">
			<view @click="goMy">
				<image style="height: 100rpx;width: 100rpx; padding: 90rpx 0 0 50rpx;"
					:src="get_img+'sys/chick/egg_icon_head.png'"></image>
				<p style="font-size: 30rpx;text-align: center;color: yellowgreen;">{{user.egg||0}}枚</p>
			</view>
			<view @click="goCustom">
				<image style="height: 100rpx;width: 100rpx; padding: 90rpx 0 0 50rpx;"
					:src="get_img+'sys/icon/kefu_icon.png'"></image>
				<p style="font-size: 30rpx;text-align: center;color: yellowgreen;">客服</p>
			</view>

		</view>
		<view style="z-index: 0;position: fixed;bottom: 150rpx;left: 50rpx;">
			<image style="height: 250rpx;width: 250rpx;will-change: transform" @load="onoff='1'" :src="chick_url">
			</image>

		</view>
		<view style="z-index: 0;position: fixed;bottom: 250rpx;left: 600rpx;">
			<image v-if="animation&&get_good_url" :src="get_good_url" class="get_food_url" @load="onoff='1'"></image>
		</view>

		<view style="z-index: 0;position: fixed;bottom: 200rpx;left: 600rpx;">
			<image v-if="animation&&food_url" :src="food_url" class="food_url" @load="onoff='1'"></image>
		</view>

		<view style="z-index: 0;position: fixed;bottom: 200rpx;" :style="'left:'+left+'rpx'">
			<image v-if="animation&&chick_foot_url" :src="chick_foot_url"
				:class="chick_infor.grade==0?'chick_foot_url':'chick_foot_url1'" @load="onoff='1'"></image>
		</view>

		<view style="height: 150rpx; width: 750rpx; z-index: 1;position: fixed;bottom: 10rpx;">
			<view style="float: left;margin-left: 50rpx;">
				<image class="image1" :src="get_img+'sys/chick/siliao_icon.png'" @click="feed"></image>
				<view>
					<view class="k">
						<!-- 可喂<span class="span2">{{user.food||0}}</span>次 -->
						点击喂养
					</view>
				</view>

			</view>
			<view>
				<view style="margin-left: 220rpx;" @click="get_egg">
					<image class="image1" :src="get_img+'sys/chick/egg_icon.png'"></image>
					<view>
						<view class="k">
							立即领取
							<!-- {{user.egg||0}}<span class="span1">枚</span> -->
						</view>
					</view>
				</view>
			</view>

			<view style="margin-left: 600rpx;" @click="show_rule">
				<image class="image1" :src="get_img+'sys/chick/rule.png'"></image>
				<view>
					<view class="k">
						游戏规则
					</view>
				</view>
			</view>

			<view style="margin-left: 400rpx;">
				<image class="image1" :src="get_img+'sys/chick/peng_icon.png'"></image>
				<view>
					<view class="k">
						已喂<span class="span3">{{chick_infor.food}}</span>
						<view style="float: right;margin-right:5rpx;">次</view>
					</view>
				</view>
			</view>
		</view>
		<view>

			<u-popup bgColor="transparent" :closeable="true" :show="records" mode="center" @close="records=false"
				@open="open" class="popup">

				<image @click="application_egg" :src="get_img+'sys/chick/get_logo_icon.png'"
					style="width: 500rpx;height: 500rpx;"></image>

			</u-popup>

		</view>
		<view v-if="egg_detail">
			<u-popup :show="show" mode="center" @close="close_" @open="open_" closeable="true" class="get_egg_1"
				:closeOnClickOverlay="false">
				<image :src="get_img+egg_detail.qrcode" style="width: 400rpx;height: 400rpx;"></image>
				<!-- <image src="../../static/logo.png" style="width: 400rpx;height: 400rpx;"></image> -->
			</u-popup>
		</view>
		<view>
			<u-modal :show="get_feed" confirmText="确认" content='浏览楼盘信息,领取饲料' @confirm='confirm'></u-modal>
		</view>
		<view class="tips" v-if="tips_show">
			<image :src="get_img+tips_url" class="tips_img" @click="tips_show=false"></image>
		</view>
		<image style="position: absolute;z-index: -1000;opacity: 0.1;left: 999rpx;" 
		v-for="(item,index) in urls"
			:key="index" :src="get_img+item"></image>
		<u-loading-page loading-text="加载中" :loading="load" bg-color="#e8e8e8"></u-loading-page>
	</view>
</template>

<script>
	var _self
	export default {
		data() {
			return {
				timeInterval: null,
				disabled: true,
				load: true,
				times: {},
				egg: 0,
				animation: false,
				show: false,
				title: '领取鸡蛋',
				content: '',
				chick_index: 0,
				get_good_url: "",
				tips_show:false,
				tips_url:"sys/chick/chick_tips.png",
				onoff: "-1",
				chick_url: this.$get_img + 'sys/chick/ji_icon.png',
				small_chick: [this.$get_img + "sys/chick/xj1.png", this.$get_img + "sys/chick/xj2.png"],
				big_chick: [this.$get_img + "sys/chick/daji1.png", this.$get_img + "sys/chick/daji2.png"],
				user: {},
				custom: {},
				showCancelButton: true,
				clearable: true,
				get_img: this.$get_img,
				chick_foot_url: "",
				chick_infor: {},
				records: false,
				get_feed: false,
				closeOnClickOverlay: false,
				food_url: "",
				left: 200,
				egg_detail: {
					qrcode: ""
				},
				sys: {},
				urls: [
					"sys/chick/get_food1.png",
					"sys/chick/get_food2.png",
					"sys/chick/food.png",
					"sys/chick/no_chick_icon.png",
					"sys/chick/small_foot1.png",
					"sys/chick/small_foot2.png",
					"sys/chick/small_foot3.png",
					"sys/chick/big_footOne.png",
					"sys/chick/big_footTwo.png",
					"sys/chick/big_footThree.png"

				]
			}
		},
		onShow() {
			this.user=uni.getStorageSync("infor")
			this.get_infor()
			this.sys = uni.getStorageSync("sys")
			this.get_chick()
			this.get_custom()
		},
		onLoad() {
			_self = this

		},
		mounted() {

		},
		onUnload() {
			clearInterval(this.times)
		},
		methods: {
			get_custom() {
				this.$model.get("user/common/get_adviser").then(res => {
					this.custom = res.data
				})
			},
			get_chick() {
				this.$model.get("user/task/get_chicken").then(res => {
					if (res.code == 200) {
						_self.chick_infor = res.data
						_self.chick_urls()

					}
				})
			},
			preLoad() { //预加载图片

				let urls = [
					"sys/chick/get_food1.png",
					"sys/chick/get_food2.png",
					"sys/chick/food.png",
					"sys/chick/no_chick_icon.png",
					"sys/chick/small_foot1.png",
					"sys/chick/small_foot2.png",
					"sys/chick/small_foot3.png",
					"sys/chick/big_footOne.png",
					"sys/chick/big_footTwo.png",
					"sys/chick/big_footThree.png"
				];
				let image = new Image()
				for (let url of urls) {

					image.src = this.get_img + url
					console.log(url)
					image.onload = () => { //加载完毕事件

					}
				}
			},
			cancel(e) {
				this.show = false
				this.egg = 0


			},
			show_rule() {

				uni.showModal({
					title: this.sys.chick_rule
				})
			},
			confirm() {
				uni.navigateTo({
					url: '../project/project'
				})
			},
			feed() {
				let that = this
				
				if(!this.user.food){
					uni.showModal({
						title:"饲料不足，可浏览楼盘信息获取",
						showCancel:false,
						success() {
							uni.navigateTo({
								url:'../house/house?id='+that.sys.chick_nav+"&type=chick"
							})
						}
					})
				}else{
					this.$model.get("user/task/feed_chicken").then(res => {
						if (res.code == 200) {
							uni.showToast({
								title:"剩余饲料:"+(that.user.food-1),
								duration:5000
							})
							_self.feed_action()
							_self.get_chick()
							_self.get_infor(false)
						}
					})
				}

				
				/* this.get_feed = true */
			},
			feed_action() {
				let times = 0;
				let that = this
				this.animation = true
				let get_food_url = ["sys/chick/get_food1.png", "sys/chick/get_food2.png"]

				let dt = 0
				let index = [1, 0]

				this.timeInterval = setInterval(function() {
					that.get_good_url = that.get_img + get_food_url[index[dt]]
					dt = index[dt]
					times++
					if (times >= 4) {
						clearInterval(that.timeInterval)

						that.get_good_url = ""
						that.food_url = that.get_img + "sys/chick/food.png"
						_self.chick_url = _self.get_img + "sys/chick/no_chick_icon.png"
						that.checken_event()

					}
				}, 500)
			},
			checken_event() {

				let that = this
				let time = 0
				let index = 0
				let index_change = [1, 0]
				let small_foot = ["sys/chick/small_foot1.png", "sys/chick/small_foot2.png", "sys/chick/small_foot3.png"]
				let big_foot = ["sys/chick/big_footOne.png", "sys/chick/big_footTwo.png", "sys/chick/big_footThree.png"]
				if (_self.chick_infor.grade == 1) {
					small_foot = big_foot
				}
				that.chick_foot_url = that.get_img + small_foot[index]
				this.timeInterval = setInterval(function() {
					if (time > 5) {
						clearInterval(that.timeInterval)
					}
					let dis = 550
					if (_self.chick_infor.grade==1) {
						dis = 420
					}
					that.chick_foot_url = that.get_img + small_foot[index]
					index = index_change[index]
					if (_self.left < dis) {
						_self.left += 30
					} else {
						small_foot[1] = small_foot[2]
						time++
					}
					if (time > 4) {
						that.food_url = ""
					}
					if (time > 5) {
						that.food_url = ""
						that.chick_foot_url = ""
						that.animation = false
						that.chick_url = _self.chick_infor.grade == 0 ? that.small_chick[0] : that.big_chick[0]
						that.left = 200
					}
				}, 500)
			},
			application_egg() {
				let that = this
				this.$model.get("user/task/application_egg").then(res => {
					if (res.code == 200) {
						that.records = false
						uni.showToast({
							title: "申请成功"
						})
						setTimeout(function() {
							uni.navigateTo({
								url: '../get_egg/get_egg'
							})
						}, 2000)
					}
				})
			},
			get_infor(is_show=true) {

				this.$model.get("user/get_infor").then(res => {
					if (res.code == 200) {
						if(_self.user){
							console.log("_self.user:",_self.user)
							console.log("res.data:",res.data)
							if(_self.user.egg!=res.data.egg){
								if(is_show){
									_self.tips_show=true
								}
								
							}else{
								if(is_show){
									_self.tips_show=true
								}
								_self.tips_url="sys/chick/egg_tips.png"
								
							}
						}
						
						uni.setStorageSync("infor", res.data)
						_self.user = res.data
					}
				})
			},
			chick_urls() {
				this.times = setInterval(function() {
					if (_self.animation && _self.chick_foot_url != '') {
						_self.chick_url = _self.get_img + "sys/chick/no_chick_icon.png"
						return;
					}
					
					let url = _self.chick_infor.grade == 0 ? _self.small_chick : _self.big_chick
					let index = [1, 0]
					_self.chick_index = index[_self.chick_index]
					_self.chick_url = url[_self.chick_index]
				}, 1000)
				setTimeout(function(){
					_self.load = false
				},1500)
				
			},
			record() {
				uni.navigateTo({
					url: '/pages/record/record'
				})
			},
			goCustom() {
				uni.navigateTo({
					url: '../chat/chat?id=' + this.custom.uid
				})
			},
			get_egg_id(id) {

				let that = this

				this.$model.get("user/task/get_egglog_id?id=" + id).then(res => {
					if (res.code == 200) {
						that.egg_detail = res.data
						that.show = true

					}
				})

			},
			goMy() {
				uni.navigateTo({
					url: "../get_egg/get_egg"
				})
				/* uni.switchTab({
					url: '../get_egg/get_egg'
				}) */
			},
			get_egg() {
				this.records = true
			},
			open() {

			},
			close() {

			},
			get_egg_() {
				this.show = true
				// console.log('get_egg_')
			},
			close_() {
				this.show = false
			},
			open_() {

			}
		}
	}
</script>

<style>
	.span1 {
		margin: 10rpx 0 0 10rpx;
		font-size: 21rpx;
	}

	.span2 {
		margin: 0 5rpx 0 5rpx;
		font-size: 21rpx;
	}

	.span3 {
		margin-left: 8rpx;
		font-size: 21rpx;
	}
	.tips_img{
		width: 700rpx;
		height: 700rpx;
	}

	.image {
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
	}
	
	.tips{
		position: absolute;
		top: 10%;
		left: 25rpx;
	}

	.get_food_url {
		width: 100rpx;
		height: 200rpx;

	}

	.chick_foot_url {
		width: 100rpx;
		height: 100rpx;
	}

	.chick_foot_url1 {
		width: 200rpx;
		height: 200rpx;
	}

	.food_url {
		width: 100rpx;
		height: 50rpx;

	}

	.image1 {
		height: 100rpx;
		width: 100rpx;
		z-index: 0;
		position: absolute;

	}

	.get_egg_1 {
		/* background-color: rgba(255, 255, 255, .3); */
		width: 400rpx;
		height: 400rpx;
	}

	.k {
		height: 40rpx;
		width: 100rpx;
		background-color: #f2a11a;
		border-radius: 20rpx;
		font-size: 21rpx;
		z-index: 1;
		position: absolute;
		margin-top: 80rpx;
		color: #fff;
		text-align: center;
		line-height: 40rpx;
	}

	.popup {
		background-color: transparent !important;
	}
</style>
